<!--
 * @Date: 2024-02-27 16:01:53
 * @Auth: 873768511@qq.com
 * @LastEditors: 873768511@qq.com
 * @LastEditTime: 2024-02-28 16:52:12
 * @FilePath: \ztc-web\src\views\overview\components\rightFunnel.vue
-->
<template>
  <div class="content">
		<div class="search-wrap">
			<select
				v-model="type"
				style="
					width: 90px;
					margin-right: 10px;
					background-color: #1275ca;
					border-radius: 4px;
					height: 27px;
					color: #d7e7f4;
					cursor:pointer;
				"
				@change="handleChange"
			>
				<option style="background-color: #d7e7f4;color:#333;" value="" label="全部类型"></option>
				<option style="background-color: #d7e7f4;color:#333;" v-for="item in event_typeid" :value="item.value" :label="item.label"></option>
			</select>
			<el-radio-group v-model="radio" size="small" @change="handleChange">
				<el-radio-button :value="1">周</el-radio-button>
				<el-radio-button :value="2">月</el-radio-button>
				<el-radio-button :value="3">年</el-radio-button>
			</el-radio-group>
		</div>
    <div id="rightFunnel" class="chart"></div>
  </div>

</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
import { getAlarmCz } from "@/api/screen"
const radio = ref(3)
const type = ref('')
const data = ref([
	{ name: '事件上报', value: 0, key:'sbNum' },
	{ name: '有效事件', value: 0, key:'yxNum' },
	{ name: '事件处置', value: 0, key:'czNum' },
	{ name: '案件办结', value: 0, key:'bjNum' },
	{ name: '事件退回', value: 0, key: 'thNum' },
])
const { proxy } = getCurrentInstance();
const { event_typeid } = proxy.useDict("event_typeid");
function handleChange () {
	getAlarmCz({ type: radio.value, eventType: type.value }).then(res => {
		const obj = res.data
		data.value.forEach(item => {
			item.value= obj[item.key]
		})
    init()
  })
}
function init () {
  let myChart = echarts.init(document.getElementById('rightFunnel'), null, {
    renderer:"svg",
  })
	myChart.setOption({
		backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: 'rgba(11, 53, 100, 0.00)' },
			{ offset: 1, color: 'rgba(11, 53, 100, 1.00)' }
		]),
		color:['#d6af16','#157cde','#29a752','#723bc2','#1e2d67'],
		grid: {
			left: '5%',
			right: '10%',
			top:'30%',
			bottom: '0%',
			containLabel: true
		},
		tooltip: {
			show:false
		},
		legend: {
			show:false,
		},
		series: [
			{
				type: 'funnel',
				bottom:'10%',
				width: '60%',
				label: {
					position: 'outside',
					formatter: '{b}: {c}'
				},
				labelLine: {
					show: false
				},
				data: data.value,
			},
			{
				type: 'funnel',
				bottom:'10%',
				width: '60%',
				label: {
					position: 'inside',
					formatter: '{c}%',
					color: '#d7e7f4'
				},
				// emphasis: {
				// 	label: {
				// 		position: 'inside',
				// 		formatter: '{c}%'
				// 	}
				// },
				data: data.value,
				// Ensure outer shape will not be over inner shape when hover.
				z: 100
			}
		]
  })
}
onMounted(() => {
  handleChange()
})
</script>

<style lanf="scss" scoped>
.content{
  height: calc(100% - 40px);
  width: 100%;
  position: relative;
}
.search-wrap{
 position: absolute;
 right: 30px;
 top: 20px;
 z-index: 2;
 display: flex;
 align-items: center;
}
.chart{
  height: 100%;
  width: 100%;
  padding: 10px 10px;
  box-sizing: border-box;
}
</style>